<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>酒店信息管理系统 - @yield('subTitle')</title>
    <link rel="shortcut icon" href=" /storage/img/favicon.ico" />
    <link href="/css/styles.css" rel="stylesheet" type="text/css" />
    <link href="/css/demo.css" rel="stylesheet" type="text/css" />
    <link href="/css/loaders.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/jquery-3.4.1.js"></script>
    <script src = "/js/bootstrap.js"></script>
    
    <script>
        $(function() {
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            $(document).on('keyup',function(e) {
                if(e.keyCode == 13) {
                    $('#btn1').click();
                }
            })
            $('.topUl>li').on('click', function() {
                // console.log($(this).index());
                var $index = $(this).index();
                
                $(this).css({
                    transition: 'all .3s linear',
                    backgroundColor:'#007bff'}).siblings().css({
                        transition: 'all .3s linear',
                        backgroundColor:'#214d7c'});
                $('.bottomUl').css({
                    transition: 'all .6s ease',
                    left: $index * -500
                })
            }); 
            var flag = true;
            $('.bottomUl svg').on('click',function() {
                    if(flag == true) {
                        $(this).hide().siblings('svg').show();
                        $('#pwd1').attr('type','text');
                        $('#pwd2').attr('type','text');
                        flag = false;
                    } else {
                        $(this).hide().siblings('svg').show();
                        $('#pwd1').attr('type','password');
                        $('#pwd2').attr('type','password');
                        flag = true;
                    }     
            })
        })
    </script>

    <body> 
        <div class="banner">
            <span>Brand Logo</span>
            <p><h2>&nbsp;小型酒店信息管理系统</h2></p>
            <button type = "button" class = "btn btn-outline-secondary"><a href = "{{url('/login')}}" style = "text-decoration: none;color:white">Sign In</a></button>
        </div>
        <div class='login'>
                <ul class="topUl">
                    <li style = "background-color:#007bff">用户注册</li>
                    <li>管理员注册</li>
                </ul>
                <ul class="bottomUl">
                    <li>
                        <div style = "position:relative;padding-top:5px;">
                            <form action="{{url('/register/users')}}" method = "post" autocomplete="off" >
                                @csrf
                                <div class="form-group">
                                    <label for="userName">用户名:</label>
                                    <small class = "text-muted">用户名长度4-16位，可以包含大小写字母、数字、汉字和英文下划线</small>
                                    <input type="text"name="userName" id="userName" class = "form-control  form-control-sm" style = "width:80%" value = "{{old('userName')}}"  required pattern="^([\u4e00-\u9fa5]{2,4})|([A-Za-z0-9_]{4,16})|([a-zA-Z0-9_\u4e00-\u9fa5]{3,16})$"> 
                                    {{-- 这个正则表示的是4-16位字母,数字,汉字,下划线 其中两个汉字是可以注册成功的,表示4个字符 --}}

                                    <label for="pwd">密码:</label>
                                    <small class = "text-muted">密码长度6-16位，可以包含大小写字母、数字和英文下划线</small>
                                    <input type="password"name="pwd" id="pwd1" class = "form-control  form-control-sm" style = "width:80%" required pattern="^[\w_-]{6,16}$"
                                    > 
                                    <svg class="bi bi-eye-slash" width="1em" height=".9em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/>
                                        <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                      </svg>
                                      <svg class="bi bi-eye" width="1em" height=".9em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style = "display: none">
                                        <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                                        <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                      </svg>
                                    {{-- 这个正则表示最短6位，最长16位 {6,16}
                                    可以包含小写大母 [a-z] 和大写字母 [A-Z]
                                    可以包含数字 [0-9]
                                    可以包含下划线 [ _ ] 和减号 [ - ] 
                                    --}}
                                    <label for="captcha">验证码:</label>
                                    <small class = "text-muted">用于区分人和机器</small>
                                    <canvas width="150" height="45" id="captcha1"></canvas> 
                                    <input type="text" name="captcha" id="captchaInput1" class = "form-control  form-control-sm" style = "width:45%;margin-left:50px" value = "{{old('captcha')}}" required > 
                                    
                                    <a href="javascript:;" id = "anchor1"><small class = "text-muted">看不清?点我</small></a>

                                    <small class = "text-muted"><span id = "hint1"></span> </small>
                                    <img src="" id = "img1">
                                    <p style = "text-align:center;margin-top:18px;"><button type = "submit" class = "btn btn-outline-primary"  style = "width:50%" id = "btn1">注册</button></p>         
                                </div>
                            </form>
                        </div>
                    </li>
                    <li>
                        <div style = "position:relative;padding-top:5px;">
                            <form action="{{url('/register/admins')}}" method = "post" autocomplete="off" >
                                @csrf
                                <div class="form-group">
                                    <label for="userName">用户名:</label>
                                    <small class = "text-muted">用户名长度4-16位，可以包含大小写字母、数字、汉字和英文下划线</small>
                                    <input type="text"name="userName" id="userName" class = "form-control  form-control-sm" style = "width:80%" value = "{{old('userName')}}"  required pattern="^([\u4e00-\u9fa5]{2,4})|([A-Za-z0-9_]{4,16})|([a-zA-Z0-9_\u4e00-\u9fa5]{3,16})$"> 
                                    {{-- 这个正则表示的是4-16位字母,数字,汉字,下划线 其中两个汉字是可以注册成功的,表示4个字符 --}}

                                    <label for="pwd">密码:</label>
                                    <small class = "text-muted">密码长度6-16位，可以包含大小写字母、数字和英文下划线</small>
                                    <input type="password"name="pwd" id="pwd2" class = "form-control  form-control-sm" style = "width:80%" required pattern="^[\w_-]{6,16}$"
                                    > 
                                    <svg class="bi bi-eye-slash" width="1em" height=".9em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
                                        <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
                                        <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709z"/>
                                        <path fill-rule="evenodd" d="M13.646 14.354l-12-12 .708-.708 12 12-.708.708z"/>
                                      </svg>
                                      <svg class="bi bi-eye" width="1em" height=".9em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" style = "display: none">
                                        <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 0 0 1.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0 0 14.828 8a13.133 13.133 0 0 0-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 0 0 1.172 8z"/>
                                        <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                                      </svg>
                                    {{-- 这个正则表示最短6位，最长16位 {6,16}
                                    可以包含小写大母 [a-z] 和大写字母 [A-Z]
                                    可以包含数字 [0-9]
                                    可以包含下划线 [ _ ] 和减号 [ - ] 
                                    --}}
                                    <label for="captcha">验证码:</label>
                                    <small class = "text-muted">用于区分人和机器</small>
                                    <canvas width="150" height="45" id="captcha2"></canvas> 
                                    <input type="text" name="captcha" id="captchaInput2" class = "form-control  form-control-sm" style = "width:45%;margin-left:50px" value = "{{old('captcha')}}" required > 
                                    
                                    <a href="javascript:;" id = "anchor2"><small class = "text-muted">看不清?点我</small></a>
                                    
                                    <small class = "text-muted"><span id = "hint2"></span> </small>
                                    <img src="" id = "img2">
                                    <p style = "text-align:center;margin-top:18px;"><button type = "submit" class = "btn btn-outline-primary"  style = "width:50%" id = "btn2">注册</button></p>         
                                </div>
                            </form>
                        </div>
                    </li>
                </ul>
            </div>
      
        <script type="text/javascript">
            //全屏
            var fullscreen = function() {
                elem = document.body;
                if (elem.webkitRequestFullScreen) {
                    elem.webkitRequestFullScreen();
                } else if (elem.mozRequestFullScreen) {
                    elem.mozRequestFullScreen();
                } else if (elem.requestFullScreen) {
                    elem.requestFullscreen();
                } else {
                    //浏览器不支持全屏API或已被禁用  
                }
            }
        </script>
        <script type="text/javascript" src="/js/ThreeWebGL.js"></script>
        <script type="text/javascript" src="/js/ThreeExtras.js"></script>
        <script type="text/javascript" src="/js/Detector.js"></script>
        <script type="text/javascript" src="/js/RequestAnimationFrame.js"></script>
        <script id="vs" type="x-shader/x-vertex">
            varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }
        </script>
        <script id="fs" type="x-shader/x-fragment">
            uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D(
            map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }

        </script>
        <script type="text/javascript">
            if (!Detector.webgl) Detector.addGetWebGLMessage();
            var canvas = document.createElement('canvas');
            canvas.width = 32;
            canvas.height = window.innerHeight;
            var context = canvas.getContext('2d');
            var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, "#1e4877");
            gradient.addColorStop(0.5, "#4584b4");
            context.fillStyle = gradient;
            context.fillRect(0, 0, canvas.width, canvas.height);
            document.body.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
            var container;
            var camera, scene, renderer, sky, mesh, geometry, material, i, h, color, colors = [],
                sprite, size, x, y, z;
            var mouseX = 0,
                mouseY = 0;
            var start_time = new Date().getTime();
            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;
            init();
            animate();

            function init() {
                container = document.createElement('div');
                document.body.appendChild(container);
                camera = new THREE.Camera(30, window.innerWidth / window.innerHeight, 1, 3000);
                camera.position.z = 6000;
                scene = new THREE.Scene();
                geometry = new THREE.Geometry();
                var texture = THREE.ImageUtils.loadTexture('');
                texture.magFilter = THREE.LinearMipMapLinearFilter;
                texture.minFilter = THREE.LinearMipMapLinearFilter;
                var fog = new THREE.Fog(0x4584b4, -100, 3000);
                material = new THREE.MeshShaderMaterial({
                    uniforms: {
                        "map": {
                            type: "t",
                            value: 2,
                            texture: texture
                        },
                        "fogColor": {
                            type: "c",
                            value: fog.color
                        },
                        "fogNear": {
                            type: "f",
                            value: fog.near
                        },
                        "fogFar": {
                            type: "f",
                            value: fog.far
                        },
                    },
                    vertexShader: document.getElementById('vs').textContent,
                    fragmentShader: document.getElementById('fs').textContent,
                    depthTest: false
                });
                var plane = new THREE.Mesh(new THREE.Plane(64, 64));
                for (i = 0; i < 8000; i++) {
                    plane.position.x = Math.random() * 1000 - 500;
                    plane.position.y = -Math.random() * Math.random() * 200 - 15;
                    plane.position.z = i;
                    plane.rotation.z = Math.random() * Math.PI;
                    plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
                    GeometryUtils.merge(geometry, plane)
                }
                mesh = new THREE.Mesh(geometry, material);
                scene.addObject(mesh);
                mesh = new THREE.Mesh(geometry, material);
                mesh.position.z = -8000;
                scene.addObject(mesh);
                renderer = new THREE.WebGLRenderer({
                    antialias: false
                });
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);
                document.addEventListener('mousemove', onDocumentMouseMove, false);
                window.addEventListener('resize', onWindowResize, false)
            }

            function onDocumentMouseMove(event) {
                mouseX = (event.clientX - windowHalfX) * 0.25;
                mouseY = (event.clientY - windowHalfY) * 0.15
            }

            function onWindowResize(event) {
                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();
                renderer.setSize(window.innerWidth, window.innerHeight)
            }

            function animate() {
                requestAnimationFrame(animate);
                render()
            }

            function render() {
                position = ((new Date().getTime() - start_time) * 0.03) % 8000;
                camera.position.x += (mouseX - camera.target.position.x) * 0.01;
                camera.position.y += (-mouseY - camera.target.position.y) * 0.01;
                camera.position.z = -position + 8000;
                camera.target.position.x = camera.position.x;
                camera.target.position.y = camera.position.y;
                camera.target.position.z = camera.position.z - 1000;
                renderer.render(scene, camera)
            }
        </script>
        <script src="/js/captcha.js"></script>
        <script>
            let captcha1 = new CaptchaMini({
            lineWidth: 1, //线条宽度
            lineNum: 6, //线条数量
            dotR: 2, //点的半径
            dotNum: 25, //点的数量
            preGroundColor: [10, 80], //前景色区间
            backGroundColor: [150, 250], //背景色区间
            fontSize: 50, //字体大小
            fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
            fontStyle: 'stroke', //字体绘制方法，有fill和stroke
            content: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', //验证码内容
            length: 4 //验证码长度
        });
            let captcha2 = new CaptchaMini({
            lineWidth: 1, //线条宽度
            lineNum: 6, //线条数量
            dotR: 2, //点的半径
            dotNum: 25, //点的数量
            preGroundColor: [10, 80], //前景色区间
            backGroundColor: [150, 250], //背景色区间
            fontSize: 50, //字体大小
            fontFamily: ['Georgia', '微软雅黑', 'Helvetica', 'Arial'], //字体类型
            fontStyle: 'stroke', //字体绘制方法，有fill和stroke
            content: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890', //验证码内容
            length: 4 //验证码长度
        });

        var anchor1 = document.querySelector('#anchor1'); //二维码刷新链接
        var anchor2 = document.querySelector('#anchor2'); //二维码刷新链接
        var hint1 = document.querySelector('#hint1'); //验证码提示消息
        var hint2 = document.querySelector('#hint2'); //验证码提示消息
        var captchaEle1 = document.querySelector('#captchaInput1'); //二维码文本框
        var captchaEle2 = document.querySelector('#captchaInput2'); //二维码文本框

        var btn1 = document.querySelector('#btn1');
        var btn2 = document.querySelector('#btn2');

        var img1 = document.querySelector('#img1');
        var img2 = document.querySelector('#img2');
        // console.log(anchor1);
        // console.log(hint1);
        // console.log(captchaEle1);
        // console.log(btn1);
        // console.log(form);
        // console.log(svg);
        // console.log(img1);

        captcha1.draw(document.querySelector('#captcha1'), r => {
                r = r.toUpperCase();
                     //校验验证码
                    captchaEle1.addEventListener('change', function() {
                        var inputVal = captchaEle1.value.toUpperCase(); //取得输入的验证码并转化为大写
                            if (inputVal == r) {
                            hint1.innerHTML = '验证码正确！';
                            img1.style.transform = 'rotate(5deg)';
                            img1.src = '/storage/img/right.png';
                            hint1.style.color = 'green';
                            btn1.type = 'submit';
                        } else if (inputVal == '') {
                            hint1.innerHTML = '验证码为空！';
                            img1.src = '';
                            hint1.style.color = 'red';
                            btn1.type = 'button';
                        } else {
                            hint1.innerHTML = '验证码错误！';
                            img1.style.transform = 'rotate(0deg)';
                            img1.src = '/storage/img/wrong.png';
                            // captchaEle1.value = '';
                            hint1.style.color = 'red';
                            btn1.type = 'button';

                        }
                    })       
                })
        captcha2.draw(document.querySelector('#captcha2'), r => {
                r = r.toUpperCase();
                     //校验验证码
                    captchaEle2.addEventListener('change', function() {
                        var inputVal = captchaEle2.value.toUpperCase(); //取得输入的验证码并转化为大写
                            if (inputVal == r) {
                            hint2.innerHTML = '验证码正确！';
                            img2.style.transform = 'rotate(5deg)';
                            img2.src = '/storage/img/right.png';
                            hint2.style.color = 'green';
                            btn2.type = 'submit';
                        } else if (inputVal == '') {
                            hint2.innerHTML = '验证码为空！';
                            img2.src = '';
                            hint2.style.color = 'red';
                            btn2.type = 'button';
                        } else {
                            hint2.innerHTML = '验证码错误！';
                            img2.style.transform = 'rotate(0deg)';
                            img2.src = '/storage/img/wrong.png';
                            // captchaEle2.value = '';
                            hint2.style.color = 'red';
                            btn2.type = 'button';
                        }
                    })       
                })
        //刷新验证码
        anchor1.addEventListener('click', function() {
            captcha1.draw(document.querySelector('#captcha1'));
        });
        anchor2.addEventListener('click', function() {
            captcha2.draw(document.querySelector('#captcha2'));
        });
        </script>
    </body>

</html>